<template >

    <div class="body"  style="margin-right: 0px;margin-left: 0px;margin-top: 0px;margin-bottom: 0px;">

        <div class="login">
            <div class="header">
                用户登录
            </div>
            <div class="input">
                <div class="input-border">
                    <input type="text" class="border" v-model="user.username" name="username" placeholder="用户名">
                </div>
                <div class="input-border">
                    <input type="password" class="border" v-model="user.password" name="password" placeholder="密码">
                </div>
            </div>
            <div class="action">
                <button style="margin-left: 60px" class="btn-login" type="primary" @click="login()">登录</button>
            </div>
        </div>
      </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  export default {
    data() {
      return {
        user:{
          username:'',
          password:'',
        }
      }
    },
    methods:{
      ...mapMutations(['setIsLogined','setUser']),
      login(){

      this.$ajax.post('login',this.user).then(res=>{
                var result=res.data;
                if(result.success){
                  var name=result.data.name;
                  var token=result.data.token;
                  var roles=result.data.roles;
                  window.sessionStorage.setItem("name",name);
                  window.sessionStorage.setItem("token",token);
                  window.sessionStorage.setItem("roles",roles);
                  this.setIsLogined(true);
                  this.setUser(this.user.username);
                  this.$router.replace('/main/stuguanli');
          }else{
            this.user.username='',
            this.user.password='',
            this.$message.error('用户名或密码错误！！');
          }
        }).catch(error=>{
        this.$message.error('网络连接失败！！');
        })
      }
    }
  }
</script>

<style scoped>
  * {
      padding: 0;
      margin: 0;
  }
.body {
    height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    /*实现块级元素垂直居中*/
    justify-content: center;
    align-items: center;
    background-color:#c9eaff;

}
  .login {
      width: 300px;
      background-color: rgba(41, 45, 62, 0.7);
      color: aliceblue;
      border-radius: 8px;
      padding: 50px;
  }

  .login .header {
      text-align: center;
      font-size: 30px;
      line-height: 100px;
  }

  .login .input input {
      background-color: rgb(41, 45, 62);
      border: 0px;
      width: 100%;
      text-align: center;
      font-size: 15px;
      color: aliceblue;
      outline: none;
  }

  .login .input input::placeholder {
      text-transform: uppercase;
  }

  .login .input-border {
      /*实现颜色从左到右渐变效果*/
      background-image: linear-gradient(to right, #e8198b, #3B65BB);
      height: 45px;
      width: 100%;
      margin-bottom: 20px;
      border-radius: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: .3s;
  }

  .login .input-border .border {
      /*这里使用了css3的calc()方法用于自动计算宽高*/
      height: calc(100% - 4px);
      width: calc(100% - 4px);
      border-radius: 25px;
      font-size: 14px;
  }

  .login .btn-login {
      width: 60%;
      border: 2px solid #3B65BB;
      margin: 0 auto;
      text-align: center;
      line-height: 40px;
      text-transform: uppercase;
      border-radius: 25px;
      cursor: pointer;
      transition: .3s;
  }

  .login .btn-login:hover {
      background-color: #3B65BB;
  }

  .login .icon {
      text-align: center;
      width: 60%;
      margin: 0 auto;
      margin-top: 18px;
      border-top: 1px dashed #eee;
      padding-top: 13px;
  }

  .login .icon i {
      font-size: 18px;
      color: rgb(187, 187, 187);
      cursor: pointer;
      padding: 0 5px;
  }
</style>
